import { Meta } from '@storybook/addon-docs';

<Meta title="API Reference/Custom Styles" id="api-custom-styles" />

# Overidding Styling Using css-in-js with customStyles

For more advanced use cases you can override or replace the global default styling using the `customStyles` prop and passing in your own css-in-js.

**Disclaimer**: you're on your own here since you will have the power to not only customize but break RDT.

Let's apply a simple `customStyles` to override the default row height and change the cell padding:

```js
import DataTable from 'react-data-table-component';

//  Internally, customStyles will deep merges your customStyles with the default styling.
const customStyles = {
	rows: {
		style: {
			minHeight: '72px', // override the row height
		},
	},
	headCells: {
		style: {
			paddingLeft: '8px', // override the cell padding for head cells
			paddingRight: '8px',
		},
	},
	cells: {
		style: {
			paddingLeft: '8px', // override the cell padding for data cells
			paddingRight: '8px',
		},
	},
};

const MyComponent = () => <DataTable title="Arnold Movies" columns={columns} customStyles={customStyles} />;
```

View [styles.ts](https://github.com/jbetancur/react-data-table-component/blob/master/src/DataTable/styles.ts) for a detailed catalog of RDT styles that you can override or extend using css-in-js objects.
